<template>
  <template v-for="menu in props.list">
    <template v-if="!menu.children">
      <a-menu-item
        :key="menu.name"
        v-if="menu.role === undefined || userStore.userInfo.role === menu.role"
      >
        <template #icon>
          <z-menuitem :is="menu.icon" />
        </template>
        {{ menu.title }}
      </a-menu-item>
    </template>

    <template v-else>
      <a-sub-menu
        :title="menu.title"
        :key="menu.name + ''"
        v-if="menu.role === undefined || userStore.userInfo.role === menu.role"
      >
        <template #icon>
          <z-menuitem :is="menu.icon" />
        </template>
        <!-- <a-menu-item v-for="sub in menu.children" :key="sub.name">
          <template #icon>
            <z-menuitem :is="sub.icon" />
          </template>
          {{ sub.title }}
        </a-menu-item> -->
				<z-recursion-item :list="menu.children"></z-recursion-item>
      </a-sub-menu>
    </template>
  </template>
</template>

<script lang="ts" setup>
import { reactive, ref, type Component } from "vue";
import { userStorer } from "@/stores/user_store";
import ZRecursionItem from "@/components/admin/z-recursion-item.vue"
import ZMenuitem from "@/components/common/z-menuitem.vue";
import { List } from "@arco-design/web-vue";
const userStore = userStorer();
interface MenuItem {
  title: string;
  name: string;
  icon?: string | Component;
  children?: MenuItem[];
  role?: number;
}

interface Props {
  list: MenuItem[];
}

const props = defineProps<Props>();
</script>
<style scoped lang="less"></style>
